<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewer:null
    };
  },
  created() {},
  mounted() {
    this.initCity()
    console.log(111)
  },
  methods: {
    initCity() {
      //cesium密钥
      // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NTFhZTUzYy1iMDY1LTQ3OGMtYmUzMS0zZjkzYzA1OTcwMzgiLCJpZCI6MjU5LCJpYXQiOjE2NjczMDg2OTN9.19evjYn4YZyB1OoUV_77qL2JOJr-Zc1Mqjp3wYisCzM"
      // 创建地图视图
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        // 显示默认的控制条
        animation: false,
        timeline: false,
        // baseLayerPicker: false,
        // geocoder: false,
        // navigationHelpButton: false,
        // homeButton: false,
        // sceneModePicker: false, 
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url:Cesium.IonResource.fromAssetId(1)
        })
      });

      this.viewer.camera.flyTo({
            destination: new Cesium.Cartesian3(-6769951.702636224,
                19908862.467722625,
                12873284.281550296
            ),
            orientation: {
                heading: 6.204061173791247,
                roll: 6.28051414931718,
                pitch: -1.5084649866224984,
            },
        })
      // 添加地球的基础图层
      // this.viewer.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      //     credit: "OpenStreetMap contributors"
      //   })
      // );

      // 创建城市模型
      // var cityModel = this.viewer.scene.primitives.add(
      //   new Cesium.Cesium3DTileset({
      //     url: "path/to/city/3dtiles"
      //   })
      // );

      // 调整摄像机位置和视角
      // this.viewer.camera.setView({
      //   destination: cityModel.boundingSphere.center,
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0),
      //     pitch: Cesium.Math.toRadians(-45),
      //     roll: 0.0
      //   }
      // });
    }
  }
};
</script>

<style lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
